import React from 'react'
import "antd/dist/antd.css";
import { Menu ,Avatar, Image} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined ,DownOutlined} from '@ant-design/icons';
import "./Header.css";
import Logo from './Logo';

import { UserOutlined ,TranslationOutlined,AppstoreAddOutlined} from '@ant-design/icons';

const { SubMenu } = Menu;

class Header extends React.Component {
    state = {
        current: 'mail',
    };

    handleClick = e => {
        console.log('click ', e);
        this.setState({ current: e.key });
    };

    render() {
        const { current } = this.state;
        return (
            <div className="Header">
                <div className="left">
                    <div className="logo" >
                        <Logo className="logo-icon"/>
                    </div>
                    <div className="products">
                        产品
                    </div>
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                        <SubMenu key="SubMenu" icon={<DownOutlined />} title="">
                            <Menu.ItemGroup title="Item 1">
                                <Menu.Item key="setting:1">Option 1</Menu.Item>
                                <Menu.Item key="setting:2">Option 2</Menu.Item>
                            </Menu.ItemGroup>
                            <Menu.ItemGroup title="Item 2">
                                <Menu.Item key="setting:3">Option 3</Menu.Item>
                                <Menu.Item key="setting:4">Option 4</Menu.Item>
                            </Menu.ItemGroup>
                        </SubMenu>
                    </Menu>
                    <div className="null"></div>
                </div>
                <div className="right">
                    <div>
                        <a href="#">官网</a>
                    </div>
                    <div>
                        <a href="#">费用</a>
                    </div>
                    <div>
                        <a href="#">
                            <AppstoreAddOutlined />
                        </a>
                    </div>
                    <div>
                        <TranslationOutlined />
                        {/* <a href="#">语言</a> */}
                    </div>
                    <div>
                        <a href="#">
                        <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                        </a>
                    </div>
                </div>
            </div>

        );
    }
}
export default Header;